<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <MyTable :list="list">
      <template v-slot:thead>
            <td>序号</td>
            <td>姓名</td>
            <td>分数</td>
            <td>标签</td>
      </template>

      <template #tbody="{i, v}">
        <td>{{ i + 1 }}</td>
        <td>{{ v.username }}</td>
        <td>{{ v.score }}</td>
        <td>
          <!-- 使用v-model 简化父子组件通信 -->
            <my-tag v-model="v.tag"></my-tag>
            <!-- 使用 原始的 props + $emit 实现父子通信 -->
            <my-tag2 @updateTag="saveTag" :id="v.id"></my-tag2>
        </td>
      </template>
    </MyTable>

    <SpanComponent></SpanComponent>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
import MyTag from './components/MyTag.vue'
import MyTag2 from './components/MyTag2.vue'
import SpanComponent from './components/SpanComponent.vue'

export default {
  name: 'App',
  components: {
    MyTable, MyTag, MyTag2, SpanComponent
  },
  data() {
    return {
      list: [
        {id: 1, username: '张三', score: 80, tag: '理性'},
        {id: 2, username: '李四', score: 70, tag: '安静'},
        {id: 3, username: '王五', score: 99, tag: '犹豫'},
      ],
      updateTag: undefined
    }
  },
  methods: {
    saveTag({ id, tag}) {
        this.list.filter(e => e.id === id)[0].tag = tag
        console.log(tag);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
